<template>
  <!-- 书籍详情页内容组件 -->
  <div class="details">
    <!-- 定义顶部导航栏 -->
    <details-top />
    <!-- 定义轮播图组件 -->
    <details-top-banner class="" />
    <!-- 定义书籍导航组件 -->
    <details-navigation />
    <!-- 定义书籍显示区域 -->
    <details-content />
    <!-- 定义页脚 -->
    <details-footer class="d-none d-md-block" />
    <!-- 定义移动端脚页 -->
    <div class="d-block d-md-none">
      <footer-text-s-m />
      <mobile-banner /> 
    </div>
  </div>
</template>

<script>
  import DetailsTop from './DetailsComponents/DetailsTop'
  import DetailsTopBanner from './DetailsComponents/DetailsTopBanner'
  import DetailsNavigation from './DetailsComponents/DetailsNavigation'
  import DetailsContent from './DetailsComponents/DetailsContent'
  import DetailsFooter from './DetailsComponents/DetailsFooter'
  import FooterTextSM from 'components/FooterText/FooterTextSM'
  import MobileBanner from 'components/Mobile/MobileBanner'

  export default {
    name: 'Details',
    components: {
      DetailsTop,
      DetailsTopBanner,
      DetailsNavigation,
      DetailsContent,
      DetailsFooter,
      FooterTextSM,
      MobileBanner
    },
    data () {
      return {
        bannerFlag: true
      }
    },
    beforeRouteEnter(to, from, next) {
      // 进入路由组件前判断刷新状态，确保当前路由组件刷新
      if (localStorage.getItem('bannerFlag') == 'true') {
        localStorage.setItem('bannerFlag', false);
        setTimeout(() => {
          window.location.reload();
        }, 50)
      }
      next();
    }
  }

</script>

<style scpeed>
  body {
    background-color: rgb(240,240,240);
  }
</style>